//点击返回顶部
let scrolltop = document.documentElement.scrollTop
$("#foot ul .li3").click(function () {
    $("html,body").animate({ scrollTop: 0 }, 500)
})
//点击图标返回首页
$("#header img").click(function(){
    window.location.href="../index.html"
})
//处理url
let reg = /([^&=]+)=?([^&]*)/g
let str = window.location.href
let categoryid = parseInt(reg.exec(str)[2])
var mark = categoryid
console.log(categoryid);
//请求数据， 初始加载页面时候默认发送一个请求
fetch(`http://chst.vip:1234/api/getcategorybyid?categoryid=${categoryid}`)
    .then(body => body.json())
    .then(res => {
        var resultobject = res.result[0]
        var titleid = resultobject.titleId
        console.log(titleid);
        console.log( resultobject);
        //category: "数码相机"
        //categoryId: 11
        //titleId: 1
        //根据lis页面点击跳转到详情页面的local href 并且 拼接?productId=x
$("#main .lis").on("click","li img",function(e){
    console.log(1);
    let _this = e.target
    let clickid = $(_this).next().attr("productId")
    let clickcname = $(_this).next().attr("cname")
    console.log(clickid);
    //跳转页面，动态拼接id
    window.location.href=`bjss_class_detail.html?productId=${clickid}&cname=${clickcname}&mark=${mark}`
})
        let str = ""
        str=`
        <div class="tag">
            <a href="" class="puba a1">首页</a> &gt; 
            <a href="" class="puba a2">全部分类</a> &gt; 
            <a href="" class="puba a3">${resultobject.category}</a>
            <p class="screen">筛选</p>
        </div>
        `
        $("#tag").html(str)
        //点击上一级class类返回
        $("#tag .tag .a2").attr("href","../pages/bjss.html")
        $("#tag .tag .a1").attr("href","../index.html")
        //首次加载默认页面数据
        fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${resultobject.categoryId}`)
        .then(body=>body.json())
        .then(res=>{
            //"pagesize": 10,
            //"totalCount": 0,
            //"result": []
            //确定此类商品一共有几页
            let pagesize = res.pagesize
            let totalCount = res.totalCount
            var pagecount = parseInt(totalCount/pagesize)+1
            let xyz = totalCount%pagesize
            if(xyz==0){
                pagecount = parseInt(totalCount/pagesize)
            }
            console.log(pagecount);
            //确定了几页后渲染option结构
            //pagecount个option
            let optionstr = ""
            for(let k = 0;k<pagecount;k++){
                optionstr+=`
                <option value="${k}">${k+1}/${pagecount}</option>
                `
            }
            $("#change #box #select").html(optionstr)

            //渲染页面结构数据
            let resultarr = res.result
            console.log(resultarr);
            let str = ""
            resultarr.forEach(item => {
                str +=`
                <li>
                ${item.productImg}
                <p class="jieshao" productId="${item.productId}" cname="${resultobject.category}">${item.productName}</p>
                <p class="jiage">${item.productPrice}</p>
                <p class="pl">${item.productQuote}&emsp;<span class="iconfont icon-pinglun"></span>${item.productCom}</p>
                </li>
                `
                //--------首次加载禁用按钮------------------------------------------------
            });
            
            $("#main .lis").html(str)
            if(pagecount==1){
                $(".up").attr("disabled",true)
                $(".down").attr("disabled",true)
            }else{
                $(".up").attr("disabled",true)
            }
            //在根据option的改变选中事件触发情况，决定fetch传参拼接页数 渲染页面
            //---------select注册改变事件------------------------------------------------
            $("#select").change(function () {
                // console.log(3);
                //获取选择中的option
                let s_option = $("#select option:selected")
                //拿到value值，此为要传入请求的page-1
                let s_index = s_option.val()-0
                var pageidd = s_index+1
                console.log(s_index);
                //按钮禁用
                let x = pagecount -1
                if(s_index>0&&s_index<x){
                    $(".up").attr("disabled",false)
                    $(".down").attr("disabled",false)
                }else if(s_index==x){
                    $(".down").attr("disabled",true)
                    $(".up").attr("disabled",false)
                }else if(s_index==0){
                    $(".up").attr("disabled",true)
                    $(".down").attr("disabled",false)
                }
                // console.log(s_index);
                fetch(`http://chst.vip:1234/api/getproductlist?categoryid=${resultobject.categoryId}&pageid=${pageidd}`)
                    .then(body => body.json())
                    .then(res => {
                        let resultarr = res.result
                        let str = ""
                        resultarr.forEach(item => {
                            str +=`
                            <li>
                            ${item.productImg}
                            <p class="jieshao" productId="${item.productId}" cname="${resultobject.category}">${item.productName}</p>
                            <p class="jiage">${item.productPrice}</p>
                            <p class="pl">${item.productQuote}&emsp;<span class="iconfont icon-pinglun"></span>${item.productCom}</p>
                            </li>
                            `
                        })
                        $("#main .lis").html(str)
                    })
            })
        })
    })
//点击按钮改变选中状态-----------------------------------------
$(".up").click(function () {
    let s_option = $("#select option:selected")
    let s_index = s_option.val()
    $("#select option:selected").attr("selected",false)
    s_index = s_index-1
    //设置value值为s_index的option为选中状态
    //.trigger("change")用来触发change事件，不然只凭js代码改变的状态非用户改变的状态无法触发change事件
    $("#select").val(s_index).trigger("change")
})
$(".down").click(function () {
    let s_option = $("#select option:selected")
    let s_index = s_option.val()
    $("#select option:selected").attr("selected",false)
    s_index = parseInt(s_index)+1
    //设置value值为s_index的option为选中状态
    //.trigger("change")用来触发change事件，不然只凭js代码改变的状态非用户改变的状态无法触发change事件
    $("#select").val(s_index).trigger("change")
})
//--------------------------------------------------------------------
